import { CanvasTexture, MeshLambertMaterial } from './lib/three.module'

// 数字问号及炸弹旗子符号的绘制
export default class MeshCover {
  constructor(sweeper) {
    let scope = this
    this.numColors = ['white', 'blue', 'green', 'red', 'DarkBlue', 'DarkRed', 'DarkCyan', 'black', 'gray']
    this.numCovers = sweeper.numCovers

    let moduleSize = sweeper.moduleSize
    let theme = sweeper.themeColor
    let numCover, ctx, texture

    //绘制旗子
    numCover = document.createElement('canvas')
    numCover.width = 16 * moduleSize
    numCover.height = 16 * moduleSize
    ctx = numCover.getContext('2d')
    ctx.fillStyle = theme.color_1
    ctx.fillRect(0, 0, 16 * moduleSize, 16 * moduleSize)
    ctx.fillStyle = theme.color_2
    ctx.fillRect(1 * moduleSize, 1 * moduleSize, 14 * moduleSize, 14 * moduleSize)
    ctx.fillStyle = '#000'
    ctx.lineWidth = 1 * moduleSize
    ctx.moveTo(9 * moduleSize, 8 * moduleSize)
    ctx.lineTo(9 * moduleSize, 13 * moduleSize)
    ctx.moveTo(5 * moduleSize, 12 * moduleSize)
    ctx.lineTo(12 * moduleSize, 12 * moduleSize)
    ctx.moveTo(3 * moduleSize, 13 * moduleSize)
    ctx.lineTo(14 * moduleSize, 13 * moduleSize)
    ctx.stroke()
    ctx.fillStyle = '#F00'
    ctx.moveTo(9.5 * moduleSize, 2 * moduleSize)
    ctx.lineTo(4 * moduleSize, 6 * moduleSize)
    ctx.lineTo(9.5 * moduleSize, 9 * moduleSize)
    ctx.lineTo(9.5 * moduleSize, 2 * moduleSize)
    ctx.fill()
    ctx.beginPath()
    texture = new CanvasTexture(numCover)
    texture = new MeshLambertMaterial({ map: texture })
    // console.log(texture)
    scope.numCovers.push(texture)
    // document.body.appendChild(numCover)
    //绘制地雷(完好)
    numCover = document.createElement('canvas')
    numCover.width = 16 * moduleSize
    numCover.height = 16 * moduleSize
    ctx = numCover.getContext('2d')
    ctx.fillStyle = theme.color_1
    ctx.fillRect(0, 0, 16 * moduleSize, 16 * moduleSize)
    ctx.fillStyle = theme.color_2
    ctx.fillRect(1 * moduleSize, 1 * moduleSize, 14 * moduleSize, 14 * moduleSize)
    ctx.fillStyle = '#000'
    ctx.lineWidth = 1 * moduleSize
    ctx.moveTo(3 * moduleSize, 3 * moduleSize)
    ctx.lineTo(13 * moduleSize, 13 * moduleSize)
    ctx.moveTo(3 * moduleSize, 13 * moduleSize)
    ctx.lineTo(13 * moduleSize, 3 * moduleSize)
    ctx.moveTo(8 * moduleSize, 1 * moduleSize)
    ctx.lineTo(8 * moduleSize, 15 * moduleSize)
    ctx.moveTo(1 * moduleSize, 8 * moduleSize)
    ctx.lineTo(15 * moduleSize, 8 * moduleSize)
    ctx.stroke()
    ctx.arc(8 * moduleSize, 8 * moduleSize, 5 * moduleSize, 0, 2 * Math.PI)
    ctx.fill()
    ctx.fillStyle = '#FFF'
    ctx.fillRect(5 * moduleSize, 5 * moduleSize, 2 * moduleSize, 2 * moduleSize)
    texture = new CanvasTexture(numCover)
    texture = new MeshLambertMaterial({ map: texture })
    scope.numCovers.push(texture)
    // document.body.appendChild(numCover)
    //绘制地雷(炸开)
    numCover = document.createElement('canvas')
    numCover.width = 16 * moduleSize
    numCover.height = 16 * moduleSize
    ctx = numCover.getContext('2d')
    ctx.fillStyle = theme.color_1
    ctx.fillRect(0, 0, 16 * moduleSize, 16 * moduleSize)
    ctx.fillStyle = '#F00'
    ctx.fillRect(1 * moduleSize, 1 * moduleSize, 14 * moduleSize, 14 * moduleSize)
    ctx.fillStyle = '#000'
    ctx.lineWidth = 1 * moduleSize
    ctx.moveTo(3 * moduleSize, 3 * moduleSize)
    ctx.lineTo(13 * moduleSize, 13 * moduleSize)
    ctx.moveTo(3 * moduleSize, 13 * moduleSize)
    ctx.lineTo(13 * moduleSize, 3 * moduleSize)
    ctx.moveTo(8 * moduleSize, 1 * moduleSize)
    ctx.lineTo(8 * moduleSize, 15 * moduleSize)
    ctx.moveTo(1 * moduleSize, 8 * moduleSize)
    ctx.lineTo(15 * moduleSize, 8 * moduleSize)
    ctx.stroke()
    ctx.arc(8 * moduleSize, 8 * moduleSize, 5 * moduleSize, 0, 2 * Math.PI)
    ctx.fill()
    ctx.fillStyle = '#FFF'
    ctx.fillRect(5 * moduleSize, 5 * moduleSize, 2 * moduleSize, 2 * moduleSize)
    texture = new CanvasTexture(numCover)
    texture = new MeshLambertMaterial({ map: texture })
    scope.numCovers.push(texture)
    // document.body.appendChild(numCover)
    //绘制数字和问号
    for (let i = -1; i < 27; i++) {
      numCover = document.createElement('canvas')
      numCover.width = 16 * moduleSize
      numCover.height = 16 * moduleSize
      ctx = numCover.getContext('2d')
      ctx.fillStyle = theme.color_1
      ctx.fillRect(0, 0, 16 * moduleSize, 16 * moduleSize)
      ctx.fillStyle = theme.color_2
      ctx.fillRect(1 * moduleSize, 1 * moduleSize, 14 * moduleSize, 14 * moduleSize)
      ctx.fillStyle = scope.numColors[i % 9] ? scope.numColors[i % 9] : 'black' //文本填充颜色
      if (i > 9) {
        ctx.font = 10 * moduleSize + 'px sans-serif' //字体样式设置
      } else {
        ctx.font = 12 * moduleSize + 'px sans-serif' //字体样式设置
      }
      ctx.textBaseline = 'middle' //文本与fillText定义的纵坐标
      ctx.textAlign = 'center' //文本居中(以fillText定义的横坐标)
      if (i >= 0) ctx.fillText(i, 8 * moduleSize, 9 * moduleSize)
      else ctx.fillText('?', 8 * moduleSize, 9 * moduleSize)
      texture = new CanvasTexture(numCover)
      texture = new MeshLambertMaterial({ map: texture })
      scope.numCovers.push(texture)
      // document.body.appendChild(numCover)
    }
  }
}
